<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:replace="fragments/head :: commonHead('项目列表')">
    <!-- 页面特定样式将由head.html中的通用头部替代 -->
</head>
<body class="bg-light">
    <div class="container py-5">
        <div class="row mb-4">
            <div class="col">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                    <div>
                        <h2 class="fw-bold text-primary mb-2">项目列表</h2>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a th:href="@{/}" class="text-decoration-none">首页</a></li>
                                <li class="breadcrumb-item active" aria-current="page">项目列表</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="mt-3 mt-md-0">
                        <a th:href="@{/}" class="btn btn-outline-primary">
                            <i class="fas fa-home me-1"></i> 返回首页
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col">
                <div class="card border-0 shadow-sm rounded-3 overflow-hidden">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                        <h5 class="mb-0 text-primary">
                            <i class="fas fa-list-alt me-2"></i>所有项目
                        </h5>
                        <div sec:authorize="hasAnyRole('ADMIN', 'MANAGER')">
                            <a th:href="@{/project/add}" class="btn btn-primary">
                                <i class="fas fa-plus me-1"></i> 新增项目
                            </a>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="bg-light">
                                    <tr>
                                        <th scope="col" class="ps-4">ID</th>
                                        <th scope="col">项目名称</th>
                                        <th scope="col">项目经理</th>
                                        <th scope="col">开始日期</th>
                                        <th scope="col">结束日期</th>
                                        <th scope="col">状态</th>
                                        <th scope="col" class="text-center">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:if="${projects.empty}">
                                        <td colspan="7" class="text-center py-4">暂无项目数据</td>
                                    </tr>
                                    <tr th:each="project : ${projects}">
                                        <td class="ps-4" th:text="${project.id}"></td>
                                        <td>
                                            <span class="fw-medium" th:text="${project.name}"></span>
                                        </td>
                                        <td>
                                            <span th:if="${project.managerId != null and managerName__${project.id}__ != null}" th:text="${managerName__${project.id}__}"></span>
                                            <span th:if="${project.managerId != null and managerName__${project.id}__ == null}" th:text="${'ID: ' + project.managerId}"></span>
                                            <span th:if="${project.managerId == null}" class="text-muted">未指定</span>
                                        </td>
                                        <td th:text="${project.startDate != null ? #dates.format(project.startDate, 'yyyy-MM-dd') : '-'}"></td>
                                        <td th:text="${project.endDate != null ? #dates.format(project.endDate, 'yyyy-MM-dd') : '-'}"></td>
                                        <td>
                                            <span th:if="${project.status == 1}" class="badge bg-secondary">未开始</span>
                                            <span th:if="${project.status == 2}" class="badge bg-primary">进行中</span>
                                            <span th:if="${project.status == 3}" class="badge bg-success">已完成</span>
                                            <span th:if="${project.status == 4}" class="badge bg-danger">已取消</span>
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm d-flex justify-content-center">
                                                <a th:href="@{/project/{id}(id=${project.id})}" class="btn btn-info text-white" data-bs-toggle="tooltip" title="查看详情">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a th:href="@{/risk/project/{id}(id=${project.id})}" class="btn btn-warning text-white" data-bs-toggle="tooltip" title="风险管理">
                                                    <i class="fas fa-exclamation-triangle"></i>
                                                </a>
                                                <a th:href="@{/project-member/list/{id}(id=${project.id})}" class="btn btn-primary" data-bs-toggle="tooltip" title="团队成员">
                                                    <i class="fas fa-users"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <footer class="footer mt-auto py-4 bg-dark text-white">
        <div class="container text-center">
            <span>© 2025 项目风险管理系统 | 版本 1.0</span>
        </div>
    </footer>
    
    <script>
        $(function () {
            $('[data-bs-toggle="tooltip"]').tooltip();
        });
    </script>
</body>
</html> 